<template>
    <div>
        <Title :icon="'file-list-2-fill'" :title="'营销报表'"></Title>
        <div class="flex ml-16px mr-16px" ref="tabContainer">
            <div class="tab-a">
                <ul>
                    <li :class="{'active':state.tabAIndex == index}" v-for="(item, index) in state.tabData" :key="index" @click="handleTabAClick(index)">
                        <div class="flex flex-center"><img :src="getImageUrl(item.icon)" v-if="item.icon">{{ item.Name
                            }}</div>
                        <div>{{ item.Value }}</div>
                    </li>
                </ul>
            </div>
            <div class="flex flex-1">
                <div class="tab-a-container" :class="{'active':state.tabAIndex == index}" v-for="(item, index) in state.tabData" :key="index">
                    <div class="tab-b">
                        <ul>
                            <li :class="{'active':state.tabBIndex == i}" v-for="(tab,i) in item.RDdetail" :key="i" @click="handleTabBClick(i)">{{ tab.rName }}{{ tab.rValue }}</li>
                        </ul>
                    </div>
                    <div class="tab-b-container" :class="{'active':state.tabBIndex == i}" v-for="(tab,i) in item.RDdetail" :key="i">
                        <ul v-for="(Item,idx) in state.tableData" :key="idx">
                            <li>
                                <b>蒸馏词</b>
                                <p>{{ Item.Keyword }}</p>
                            </li>
                            <li>
                                <b>问题</b>
                                <p>{{ Item.Title }}</p>
                            </li>
                            <li>
                                <b>平台</b>
                                <p>{{ Item.AITypeName }}</p>
                            </li>
                            <li>
                                <b class="flex justify-between">来源</b>
                                <p>{{ formatRank(Item.Rank) }}</p>
                            </li>
                            <li>
                                <b>查询时间</b>
                                <p>{{ formatDate(Item.AddTime) }}</p>
                            </li>
                        </ul>
                    </div>
                    <div class="pt-10px pb-10px flex justify-between">
                        <el-button @click="handlePrev">上一页</el-button>
                        <el-button @click="handleNext">下一页</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-center text-12px pt-16px pb-16px text-#999999">本数据排序结果仅为参考，不代表来源平台立场</div>
    </div>
</template>

<script setup lang="ts">
import { getKeywordReportApi } from '@/api/geoBasic/index'
import { ITab,IReport } from '@/api/geo/types'
import { dateFormat } from '@/utils/date'

const route = useRoute()

const emit = defineEmits(['update:scroll'])

const formatDate = computed(() => {
    return function (data: string) {
        return dateFormat(data, 'YYYY-MM-DD')
    }
})

const tabContainer = ref()

const state = reactive({
    tableData: <IReport[]>[],
    page: {
        total: 0,
        curPage: 1,
        limit: 10,
        pageSizes: 10,
    },
    isLoading: false,
    all: 0,
    type: 0,
    stype: 0,
    tabData: <ITab[]>[],
    skip: '',
    tabAIndex:0,
    tabBIndex:0
})

function handleTabAClick(index: number) {
    //每次切换的时候重置分页，重新获取数据
    state.type = index
    state.stype = 0
    state.tabBIndex = 0
    state.tabAIndex = index
    state.page.curPage = 1
    state.page.pageSizes = 10
    getRoutePath()
}

function handleTabBClick(index: number) {
    //每次切换的时候重置分页，重新获取数据
    state.stype = index
    state.tabBIndex = index
    state.page.curPage = 1
    state.page.pageSizes = 10
    getRoutePath()
}

async function getKeywordReport(url: string) {
    const res: ResType = await getKeywordReportApi(url, {
        pn: state.page.curPage,
        pagesize: state.page.pageSizes,
        aitype: state.type,
        stype: state.stype,
        skip: state.skip
    })
    if (res.code === 200) {
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count

        state.tabData = res.ailist
    }
}

function getRoutePath() {
    getKeywordReport("/GEOCustomerApi/KeywordRankList")
}

const getImageUrl = (name: string) => {
    return new URL(`../../../../assets/images/${name}.png`, import.meta.url).href;
};

function formatRank(value:number){
    return value === 1 ? '移动端' : 'PC端'
}

async function handlePrev(){
    if(state.page.curPage > 0){
        state.page.curPage--
    }
    await getRoutePath()
    emit('update:scroll')
}

async function handleNext(){
    if(state.page.curPage < state.page.total){
        state.page.curPage++
    }
    await getRoutePath()
    emit('update:scroll')
}

onMounted(() => {
    const { skip } = route.query
    state.skip = skip as string
    getRoutePath()
})
</script>

<style lang="scss" scoped>
.tab-a {
    width: 105px;

    ul {
        li {
            text-align: center;
            font-size: 14px;
            line-height: 16px;
            color: var(--title-color);
            padding: 8px 4px;
            background-color: var(--mainBg);
            border-radius: 3px;
            margin-right: 14px;
            position: relative;
            transition: all 0.3s;
            cursor: pointer;
            align-items: center;
            margin-bottom: 5px;

            img {
                height: 16px;
                margin-right: 3px;
            }

            &.active {
                color: #ffffff;
                font-weight: bold;
                background-color: var(--mainColor);
                transition: all 0.3s;

                &::after {
                    content: '';
                    position: absolute;
                    right: -7px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-top: 7px solid transparent;
                    border-bottom: 7px solid transparent;
                    border-left: 7px solid var(--mainColor);
                }
            }
        }
    }
}
.tab-a-container{
    width: 100%;
    display: none;
    &.active{
        display: block;
    }
}
.tab-b{
    ul{
        display: flex;
        margin-top: 8px;
        li{
            font-size: 12px;
            line-height: 30px;
            height: 30px;
            color: var(--title-color);
            padding: 0 10px;
            cursor: pointer;
            white-space: nowrap;

            &.active {
                background-color: var(--mainColor);
                border-radius: 5px;
                color:#fff;
                font-weight: bold;
            }
        }
    }
}
.tab-b-container{
    ul{
        padding:10px 0;
        border-bottom: 1px solid #ebeef5;
        li{
            padding:5px 10px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            line-height: 1.2;
            b{
                width: 60px;
                display: flex;
                justify-content: space-between;
            }
            p{
                color: #666666;
            }
        }
    }
}
</style>